import './style.css'

let config = {
  viewport:{
    width:100,//宽
    height:100,//高
    dom:{}//原始dom
  },
  ctl:{
    pos:{//位置

    },
    with:20,
    height:10,
    dom:{},
    trols:[
      {
        name:"",
        icon:"",
        click:()=>{}
      }
    ]
  }, 
  canvas:{
    eidtable:true,//是否可编辑拖动
    nodes:[],
    edges:[]
  }
}

//TODO 1.关键数据全部放到对象类
2.
let viewport = document.querySelector("#viewport") as HTMLDivElement
let objContainer = document.querySelector("#canvas") as HTMLDivElement
let nodesContainer = document.querySelector("#nodes") as HTMLDivElement
let edges = document.querySelector("#edges") as HTMLDivElement
let controlNode = document.querySelector("#controlNode") as HTMLDivElement

let nodes = document.querySelectorAll<HTMLDivElement>('[data-type="node"]')

let nowMoveNode:HTMLDivElement|undefined = undefined
let mousePos = {
  x:0,
  y:0
}
let divPos = {
  x :0,
  y:0
}
let divs = new Map<string,{x:number,y:number}>()
divs.set("1",{
  x :0,
  y:0
})
divs.set("2",{
  x :0,
  y:0
})
function nodeMouseMove(e:MouseEvent){

  if(!nowMoveNode){
    return
  }
  let draging = nowMoveNode.dataset.draging
  if(!draging){
    return
  }
  console.log(3);
  
  let id = nowMoveNode.dataset.id as string
  let divPos = divs.get(id)
  let changeX = e.clientX-mousePos?.x
  let changeY = e.clientY-mousePos?.y
  console.log("change:",changeX,changeY);
  if(Math.abs(changeX)>20){
    changeX = changeX>0?20 :-20
  }
  if(Math.abs(changeY)>20){
    changeY = changeY>0?20 :-20
  }
  divPos!.x = divPos!.x+changeX
  divPos!.y = divPos!.y+changeY
  nowMoveNode.style.transform = `translate(${divPos?.x}px,${divPos?.y}px)`
  console.log(1);
  mousePos.x = mousePos.x+changeX
  mousePos.y = mousePos.y+changeY
  e.stopPropagation()
}
function nodeMouseDown(e:MouseEvent){
  console.log(2);
  
  mousePos.x = e.clientX
  mousePos.y = e.clientY
  nowMoveNode = e.target as HTMLDivElement
  nowMoveNode!.dataset.draging = "draging"
  document.addEventListener("mousemove",nodeMouseMove)
  document.addEventListener("mouseup",nodeMouseUp)
  e.stopPropagation()
}
function nodeMouseUp(e:MouseEvent){

  mousePos.x = 0
  mousePos.y = 0
  delete nowMoveNode!.dataset.draging
  nowMoveNode = undefined
  document.removeEventListener("mousemove",nodeMouseMove)
  document.removeEventListener("mouseup",nodeMouseUp)
  e.stopPropagation()
}
console.log(nodes);

nodes.forEach(n=>{
  n.addEventListener("mousedown",nodeMouseDown)
})
let isMove = false;



let scaleStep = 0.2
let scale = 1;
function canvasMove(ev:MouseEvent){
  if(!isMove){
    return
  }
  let nowx = ev.clientX
  let nowy = ev.clientY
  let changX = nowx-mousePos.x
  let changY = nowy-mousePos.y
  if(Math.abs(changX)>20){
    changX = changX>0?20 :-20
  }
  if(Math.abs(changY)>20){
    changY = changY>0?20 :-20
  }
  divPos.x = divPos.x+changX
  divPos.y = divPos.y+changY
  objContainer.style.transform = `translate(${divPos.x}px,${divPos.y}px) scale(${scale})`
  mousePos.x = mousePos.x+changX
  mousePos.y = mousePos.y+changY
}
function canvasMouseUp(ev:MouseEvent){
  isMove = false;
  mousePos.x = 0;
  mousePos.y = 0;
  document.removeEventListener("mouseup",canvasMouseUp)
  document.removeEventListener("mousemove",canvasMove)
}

viewport.addEventListener("mousedown",(ev:MouseEvent)=>{
  console.log("视图点击");
  
  isMove = true
  mousePos.x = ev.clientX
  mousePos.y = ev.clientY
  document.addEventListener("mousemove",canvasMove)
  document.addEventListener("mouseup",canvasMouseUp)
  ev.preventDefault()
})
viewport.addEventListener("wheel",(e:WheelEvent)=>{

  if(e.deltaY>0){
    scale+=scaleStep

  }else{
    scale-=scaleStep
  }
  if(scale<0.4){
    scale = 0.4
  }
  if(scale>2){
    scale=2
  }
  //TODO 获取鼠标的位置，按鼠标位置进行缩放
  
  objContainer.style.transform = `translate(${divPos.x}px,${divPos.y}px) scale(${scale})`
})